<template>
    <div>
        <a-input-search
      v-model:value="InPutvalue"
      placeholder="请输入想要查询的机构名称"
      enter-button
      @search="onSearch"
    />
    </div>
  <a-tree :treeData="treeData" :expandedKeys="expandedKeys" @expand="onExpand">
    <template #title="{ title, key, node }">
      <div class="tree-node">
        <span @click="toggleExpand(key)">
          {{ title }}
          <!-- <template v-if="expandedKeys.includes(key)">▼</template>
          <template v-else>▶</template> -->
        </span>
        <a-dropdown>
          <template #overlay>
            <a-menu @click="handleMenuClick(key, node, $event)">
              <a-menu-item key="addAbove">向上添加</a-menu-item>
              <a-menu-item key="addBelow">向下添加</a-menu-item>
              <a-menu-item key="addChild">添加子项</a-menu-item>
              <a-menu-item key="moveUp">上移</a-menu-item>
              <a-menu-item key="moveDown">下移</a-menu-item>
              <a-menu-item key="delete">删除</a-menu-item>
            </a-menu>
          </template>
          <a-button type="link">操作</a-button>
        </a-dropdown>
      </div>
    </template>
  </a-tree>
</template>

<script>
  import { defineComponent, ref } from 'vue'
  import { Tree, Dropdown, Menu, Button } from 'ant-design-vue'

  export default defineComponent({
    name: 'TreeComponent',
    components: {
      'a-tree': Tree,
      'a-dropdown': Dropdown,
      'a-menu': Menu,
      'a-menu-item': Menu.Item,
      'a-button': Button,
    },
    setup() {
      const treeData = ref([
        {
          title: 'Node 1',
          key: '0-0',
          children: [
            { title: 'Child Node 1', key: '0-0-0' },
            { title: 'Child Node 2', key: '0-0-1' },
          ],
        },
        {
          title: 'Node 2',
          key: '0-1',
          children: [{ title: 'Child Node 3', key: '0-1-0' }],
        },
      ])
      const InPutvalue = ref('')
      const expandedKeys = ref(['0-0', '0-1'])
    //搜索树
    const onSearch = (value) => {

    }
      const onExpand = (expandedKeysValue) => {
        expandedKeys.value = expandedKeysValue
      }

      const toggleExpand = (key) => {
        if (expandedKeys.value.includes(key)) {
          expandedKeys.value = expandedKeys.value.filter((k) => k !== key)
        } else {
          expandedKeys.value.push(key)
        }
      }
      //点击每一行 对每一行操作进行判断
      const handleMenuClick = (key, node, event) => {
        const action = event.key
        switch (action) {
          case 'addAbove':
            addNodeAbove(key)
            break
          case 'addBelow':
            addNodeBelow(key)
            break
          case 'addChild':
            addChildNode(key)
            break
          case 'moveUp':
            moveNodeUp(key)
            break
          case 'moveDown':
            moveNodeDown(key)
            break
          case 'delete':
            deleteNode(key)
            break
        }
      }

      const findNodeAndParent = (nodes, key, parent = null) => {
        for (let i = 0; i < nodes.length; i++) {
          if (nodes[i].key === key) {
            return { node: nodes[i], parent, index: i }
          }
          if (nodes[i].children) {
            const result = findNodeAndParent(nodes[i].children, key, nodes[i])
            if (result) return result
          }
        }
        return null
      }

      const addNodeAbove = (key) => {
        const { parent, index } = findNodeAndParent(treeData.value, key)
        const newNode = { title: 'New Node', key: `${key}-${Date.now()}` }
        if (parent) {
          parent.children.splice(index, 0, newNode)
        } else {
          treeData.value.splice(index, 0, newNode)
        }
      }

      const addNodeBelow = (key) => {
        const { parent, index } = findNodeAndParent(treeData.value, key)
        const newNode = { title: 'New Node', key: `${key}-${Date.now()}` }
        if (parent) {
          parent.children.splice(index + 1, 0, newNode)
        } else {
          treeData.value.splice(index + 1, 0, newNode)
        }
      }

      const addChildNode = (key) => {
        const { node } = findNodeAndParent(treeData.value, key)
        const newNode = { title: 'New Child', key: `${key}-${Date.now()}` }
        if (!node.children) {
          node.children = []
        }
        node.children.push(newNode)
        expandedKeys.value.push(key)
      }

      const moveNodeUp = (key) => {
        const { parent, index } = findNodeAndParent(treeData.value, key)
        if (index > 0) {
          const siblings = parent ? parent.children : treeData.value
          ;[siblings[index - 1], siblings[index]] = [
            siblings[index],
            siblings[index - 1],
          ]
        }
      }

      const moveNodeDown = (key) => {
        const { parent, index } = findNodeAndParent(treeData.value, key)
        const siblings = parent ? parent.children : treeData.value
        if (index < siblings.length - 1) {
          ;[siblings[index], siblings[index + 1]] = [
            siblings[index + 1],
            siblings[index],
          ]
        }
      }

      const deleteNode = (key) => {
        const { parent, index } = findNodeAndParent(treeData.value, key)
        const siblings = parent ? parent.children : treeData.value
        siblings.splice(index, 1)
      }

      return {
        treeData,
        expandedKeys,
        onExpand,
        toggleExpand,
        handleMenuClick,
      }
    },
  })
</script>

<style scoped>
  .tree-node {
    display: flex;
    align-items: center;
  }
</style>
